<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>jQuery | YTBlog</title>
    <meta name="generator" content="VuePress 1.5.2">
    
    <meta name="description" content="前端技术分享">
    <link rel="preload" href="/ytblog/assets/css/0.styles.cb920d31.css" as="style"><link rel="preload" href="/ytblog/assets/js/app.5ba5dcf6.js" as="script"><link rel="preload" href="/ytblog/assets/js/2.f25dafc3.js" as="script"><link rel="preload" href="/ytblog/assets/js/12.66c94e70.js" as="script"><link rel="prefetch" href="/ytblog/assets/js/10.5a02d3b2.js"><link rel="prefetch" href="/ytblog/assets/js/11.44a85492.js"><link rel="prefetch" href="/ytblog/assets/js/13.fbec9428.js"><link rel="prefetch" href="/ytblog/assets/js/3.1ec314c7.js"><link rel="prefetch" href="/ytblog/assets/js/4.6f6a54bd.js"><link rel="prefetch" href="/ytblog/assets/js/5.64df639e.js"><link rel="prefetch" href="/ytblog/assets/js/6.60c7b6d3.js"><link rel="prefetch" href="/ytblog/assets/js/7.7c06f209.js"><link rel="prefetch" href="/ytblog/assets/js/8.f6875229.js"><link rel="prefetch" href="/ytblog/assets/js/9.6f0d250c.js">
    <link rel="stylesheet" href="/ytblog/assets/css/0.styles.cb920d31.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/ytblog/" class="home-link router-link-active"><!----> <span class="site-name">YTBlog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/ytblog/" class="nav-link">
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="练手小项目" class="dropdown-title"><span class="title">练手小项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/HTML/" class="nav-link">
  HTML&amp;CSS
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/JavaScript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/jquery/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  jquery
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/vue/" class="nav-link">
  vue
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端一些概念理解" class="dropdown-title"><span class="title">前端一些概念理解</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/CSS/" class="nav-link">
  知识点整理
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/ES6/" class="nav-link">
  读书笔记
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/ytblog/" class="nav-link">
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="练手小项目" class="dropdown-title"><span class="title">练手小项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/HTML/" class="nav-link">
  HTML&amp;CSS
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/JavaScript/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/jquery/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  jquery
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/vue/" class="nav-link">
  vue
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端一些概念理解" class="dropdown-title"><span class="title">前端一些概念理解</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/CSS/" class="nav-link">
  知识点整理
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/ES6/" class="nav-link">
  读书笔记
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>jQuery</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/ytblog/jquery/#使用jquery和mui搭建实时段子" class="sidebar-link">使用jquery和mui搭建实时段子</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="jquery"><a href="#jquery" class="header-anchor">#</a> jQuery</h1> <h2 id="使用jquery和mui搭建实时段子"><a href="#使用jquery和mui搭建实时段子" class="header-anchor">#</a> 使用jquery和mui搭建实时段子</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/joke_jquery_mui/" target="_blank" rel="noopener noreferrer">用jquery和mui写的实时段子<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>Hbuildx可以直接快速搭建mui的html模板，会帮你引入JS和CSS文件，以及生成手机APP的配置文件。</p> <p>有了ui搭建网站就会变得很简单了。先建一个hello mui的模板，打开index可以直接查看组件，看到合适的复制下来就好了。</p> <p>jQuery的ajax请求封装的很完善</p> <div class="language- extra-class"><pre class="language-text"><code>$.get(httpUrl,function(res){})
$.get(httpUrl1).then(function(res){})
</code></pre></div><p>这两种方法都可以，这里的返回对象res直接就是json格式转化之后的对象。</p> <p>还可以写</p> <div class="language- extra-class"><pre class="language-text"><code>$.get(httpUrl2,options).then(function(res){})
</code></pre></div><p>因为get请求的参数都放在地址里了，通常是？参数=值&amp;参数2=值这种方式，这里options是一个对象，可以把这些参数传进去，和Vue终端的params差不多。</p> <p>jquery点击事件绑定的时候非常轻松</p> <div class="language- extra-class"><pre class="language-text"><code>				$('.mui-tab-item').click(function() {
					var index = $(this).index()
					console.log(this)
					$('.content').fadeOut(300).eq(index).fadeIn(300);
				})
</code></pre></div><p>例如这里，mui-tab-item是三个按钮，$(this).index()可以直接找到按的是哪个按钮，其中this指被点击的按钮。然后我们把所有content消失，在把对应index的content显示。</p> <p>点击事件的传参我们可以用在按钮上添加属性的方式进行，例如播放的时候我们需要video src的参数，那我们就放进去</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div class=&quot;playbtn&quot; data-index=&quot;${index}&quot; data-video=&quot;${item.video}&quot;&gt;&lt;/div&gt;
</code></pre></div><p>在绑定点击事件的时候</p> <p>可以找到该属性的值</p> <div class="language- extra-class"><pre class="language-text"><code>var video = $(this).attr('data-video')
</code></pre></div><p>需要注意的是：我们对视频列表进行ajax请求，然后生成对应的播放按钮，那么对播放按钮的绑定就必须在视频列表生成之后，播放按钮的事件绑定要放在视频列表foreach循环生成之后，也在$.get(httpUrl1).then(function(res){})里面进行。</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/ytblog/assets/js/app.5ba5dcf6.js" defer></script><script src="/ytblog/assets/js/2.f25dafc3.js" defer></script><script src="/ytblog/assets/js/12.66c94e70.js" defer></script>
  </body>
</html>
